<template>
<div>
<el-card class="box-card">
  <div slot="header">
       <el-row>
        <el-button type="primary" @click=" addForm = true ">新增用户</el-button>
        <el-button type="primary" @click="toDel">删除用户</el-button>
        <el-button type="primary" @click="toQue">查询用户</el-button>
    </el-row>
  
  </div>
  <div >
    <el-table
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    border
    style="width: 100%">
    <el-table-column
      prop="name"
      label="名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="code"
      label="编码"
      width="180">
    </el-table-column>
  <el-table-column
      prop="type"
      label="类型"
      width="180">
    </el-table-column>
     <el-table-column
      prop="status"
      label="状态"
      width="180">
    </el-table-column>
  </el-table>
  </div>

   <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page= searchData.pageNum
      :page-sizes="[10, 20, 30, 40]"
      :page-size= searchData.pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total= "total">
    </el-pagination> -->

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync = searchData.pageNum
            :page-size="20"
            layout="total, prev, pager, next"
            :total= total>
        </el-pagination>
</el-card>



<!-- 分页 -->


<el-dialog title="新增" :visible.sync="addForm">
  <el-form :model="add">
    <el-form-item label="名称" :label-width="formWidth">
      <el-input v-model="add.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="编码" :label-width="formWidth">
    <el-input v-model="add.code" autocomplete="off"></el-input>
    </el-form-item>
      <!-- <el-select v-model="form.nikeName" placeholder="请选择活动区域">
        <el-option label="密码" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select> -->
    <el-form-item label="英文名称" :label-width="formWidth">
    <el-input v-model="add.ename" autocomplete="off"></el-input>
    </el-form-item>
       <el-form-item label="层级" :label-width="formWidth">
    <el-input v-model="add.layer" autocomplete="off"></el-input>
    </el-form-item>
       <el-form-item label="父节点" :label-width="formWidth">
    <el-input v-model="add.pid" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="类型" :label-width="formWidth">
    <el-input v-model="add.type" autocomplete="off"></el-input>
    </el-form-item>
   <el-form-item label="状态" :label-width="formWidth">
    <el-input v-model="add.status" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addForm = false">取 消</el-button>
    <el-button type="primary" @click="toAdd">确 定</el-button>
  </div>
</el-dialog>


</div>
</template>

<script>

export default {
    name: "UserRoleConfig",
  data() {
    return {
        roleId: '',
        roleName: '',
        // 分页相关
        total:0 ,
        // 查询条件,分页数据
        searchData: {
          pageNum: 1, // 当前页
          pageSize: 10,// 页面大小
        },
        tableData: null,
        addForm: false,
        updateForm: false,
        formWidth: '120px',
        add: {},
        currentRow: {},
       

    }
  },
 created() {
     //打开页面
      this.roleId = this.$route.params.roleId
      this.roleName =this.$route.params.roleName
      this.init()
  },
  methods: {
      init(){
          console.log(this.searchData)
          console.log("roleId："+this.roleId)
          getRolePages(this.searchData).then(res=>{
            this.tableData = res.data.records
            this.total  = res.data.total
          })
      },
    toAdd(){
       // console.log("用户数据："+this.form)
        addRole(this.add).then(res =>{
            if(res.code == 200){
                this.$message.success(res.msg)
                this.addForm = false
                this.init()

            }else{
                this.$message(res.msg)
            }
        })

    },
     toUpdate(){
        if(this.currentRow == null){
            this.$message.error("请选择要修改的用户")
        }else{
            this.updateForm = true
        }
    },
    updateR(){
     console.log(this.currentRow.roleId)
        updateRole(this.currentRow.roleId,this.currentRow).then(res=>{
            if(res.code == 200){
                this.$message.success(res.msg)
                this.updateForm = false
                this.init()

            }else{
                this.$message(res.msg)
            }
        })
    },

     toDel(){
     if(this.currentRow == null){
            this.$message.error("请选择要删除的用户")
        }
       deleteRole(this.currentRow.roleId).then (res =>{
        if(res.code == 200){
                this.$message.success(res.msg)
                this.init()

            }else{
                this.$message(res.msg)
            }
     })
    },
     toQue(){
        this.$message('查询')
    },
     //选择：
    handleCurrentChange(val){
        this.currentRow = val
    },

     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  },
 
 
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

